<template>
  <div class='app-container'>
  	<div class="app-box">
  		<el-button size="mini" type="info" v-on:click='back()' class='unit-sbtn' style="float:right;">返回</el-button>
      <div style="clear:both;">
      	
      </div>
  		<div class="d-box">
					<p>
						<span>保险公司：</span>
						<span class="d-setc">{{info.insuranceName}}</span>
						<span class="set30">有效日期：</span>
						<span class="d-setc">{{info.effectiveDate}} 到 &nbsp;</span>
						<span class="d-setc" v-if="info.expiryDate">{{info.expiryDate}}&nbsp;&nbsp;</span>
						<span class="d-setc" v-else>不限</span>

						<span class="set30">匹配日期类型：</span>
						<span class="d-setc">{{info.matchDateType}}</span>&nbsp;&nbsp;
					</p>
					<div class="minflao">
						<span class="minflao_first">适用工号：</span>
						<span class="d-setc" v-for='(item,index) in info.staffNames'>
							<span class="isF">&nbsp;&nbsp;|&nbsp;&nbsp;</span>{{item.staffAccount}}（{{item.describe}}）
							<span v-if="info.staffNames.length-1!=index">，</span>
						</span>
						<div style="clear:both"></div>
					</div>
				</div>
			<div class="years">
				<span class="numtime">出单时间：</span>
				 <el-date-picker
				 	@change="chanyear"
				 	size='mini'
		      v-model="dateyears"
		      type="daterange"
		      align="right"
		      unlink-panels
		      range-separator="至"
		      start-placeholder="开始日期"
		      end-placeholder="结束日期"
		      value-format="yyyy-MM-dd"
		     >
		    </el-date-picker>
		     <el-button size="mini" type="primary" style="float:right" v-on:click='search()' class='unit-sbtn'>搜索</el-button>
    
			</div>
		
			<div class="polocy-table">
          <el-table
            :data="tableData"
            v-loading="loadinging"
            stripe
            style="width: 100%">
            
            <el-table-column
	            prop="name"
	            label="政策描述"
	           >
            <template slot-scope="scope">
            	<span class="godttail" @click="detailgo(scope.row)">{{scope.row.remarks}}</span>
                <!--<span class='rightbaodan' @click="toPoliciesDetail(scope.row.id,scope.row.conpany)">{{scope.row.name}}</span>
           -->
            </template>
            </el-table-column>
            
           
            <el-table-column
	            prop="baodan"
	            label="保单总量"
	             align="right"
	           >
	           <template slot-scope="scope">
	            <span>{{scope.row.guaranteeCount}}</span>
	           </template>
            </el-table-column>
            
            <el-table-column
	            prop="rightbaodan"
	             align="right"
	            label="交强险保单量">
	             <template slot-scope="scope">
		           	<span>{{scope.row.haveMatchPolicyCount}}</span>
		           </template>
	           
	           </el-table-column>
	           
              <el-table-column
		            prop="falsebaodan"
		             align="right"
		            label="商业险保单量">
		            <template slot-scope="scope">
			           	<span>{{scope.row.notMatchPolicyCount}}</span>
			           </template>
		            	
            </el-table-column>
            <el-table-column
	            width="30"
	           >
	          
	           </el-table-column>
        </el-table>
      </div>

  	</div>
  		
  </div>
</template>
<script>
export default {
  data() {
    return {
       info: {},
       policyBatchId:"",
       tableData:[],
       startDate:"",
       endDate:"",
       dateyears:[],
       loadinging:false
    }
  },
  mounted() {
    //8224fb32-19f5-4eb5-9097-7cf9eaea8e43
    console.log(this.$route.query)
    this.policyBatchId=this.$route.query.id
    this.getyear()
    this.getBasic()
    this.getdata()
  },
  computed: {
   
  },
  
  watch:{
    
  },
  methods: {
  	back(){
  		this.$router.go(-1)
  	},
  	detailgo(val){
  		console.log(val)
  		//policydowninfo
  		if(val.policyBatchType==1){
  			
			this.$router.push({
	        name: "policydowninfo",
	        query: {
	          batchId: this.policyBatchId,
	          policyId:val.id,
	          status: 1,
	          stream: 2,
	          filterType:1,
	          Jurisdiction:2
	        }
	      });
      
  		}else{
				this.$router.push({
	        name: "up_policyupedit",
	        query: {
	          batchId: this.policyBatchId,
	          policyId:val.id,
	          status: 1,
	          stream: 1,
	          filterType:1
	        }
	      });
  		}
//		this.$router.push({
//			name:"policydetail",
//			params:{
//				id:this.policyBatchId
//			}
//		})
  	},
  	chanyear(val){
  		console.log(val)
  	},
  	//获取默认时间
  	getyear(){
  	
  		let aa=this.$route.query.startDay
  		let bb=this.$route.query.endDay
  		this.dateyears.push(aa)
  		this.dateyears.push(bb)
  	},
    //信息
    getBasic() {
    	
      let params = {
        id: this.policyBatchId
      };
      this.post(params, "services/app/policy/GetPolicyBatchBasic").then(rs => {
        if (rs.success) {
          console.log("--------------------");
          console.log(rs);
          this.info = rs.result;
        } else {
          this.$notify.error({
            title: "错误",
            message: rs.error.message
          });
        }
      });
    },
    search(){
    	this.getdata()
    },
   getdata(){
   	this.loadinging=true
   	 let params = {
        policyBatchId: this.policyBatchId,
        startDate:this.dateyears[0],
       	endDate:this.dateyears[1],
      };
      this.post(params, "services/app/report/PolicyItemMatch").then(rs => {
        if (rs.success) {
          	this.loadinging=false
          console.log(rs);
          this.tableData=rs.result.items
         
        } else {
        		this.loadinging=false
          this.$notify.error({
            title: "错误",
            message: rs.error.message
          });
        }
      });
   },
  }
};
</script>
<style lang="scss" scoped>
.app-box{
	padding: 30px 20px;

}
.years{
	margin-top:20px;
	margin-bottom:20px;
}
.d-box {
        background: #eaf5fb;
        //width: 100%;
        min-height: 79px;
        padding: 15px 30px;
        position: relative;
				margin-top:30px;
				
        p {
          margin: 0;
          span {
            font-size: 13px;
            color: #95bacc;
          }
          .d-setc {
            color: #2e94c5;
          }
          .isF:first-child {
            display: none;
          }
        }
        p:nth-of-type(1) {
          margin-bottom: 8px;
        }
        .minflao {
          width: 100%;
          min-height: 28px;
          font-size: 13px;
          color: #95bacc;
          .isF:first-child {
            display: none;
          }
          .d-setc {
            color: #2e94c5;
            margin-top: 3px;
            display: block;
            float: left;
            line-height: 28px;
          }
          .minflao_first {
            margin-top: 3px;
            display: block;
            float: left;
            line-height: 28px;
          }
        }
      }
      .set30 {
  margin-left: 30px;
}
.godttail{
	    color: #027dca;
	    cursor:pointer;
}
.numtime{
	color:#666;

}
</style>